<!-- 显示右侧的字段属性 -->
<template>
  <div v-if="show">
    <div>
      <!--            <WidgetForm ref="widgetForm"></WidgetForm>-->
    </div>
    <el-dialog
      title="字段级联设置"
      :visible.sync="dialogFormVisible"
      width="85%"
    >
      <el-button type="danger" icon="el-icon-plus" @click="addListRow()"
        >新增</el-button
      >
      <el-table
        :data="getDialogFormData(data)"
        border
        stripe
        style="width: 100%;"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="name" label="所选值">
          <template slot-scope="scope">
            <el-select v-model="scope.row.value" placeholder="请选择">
              <el-option
                v-for="item in remoteFuncsFields"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="变换字段" :colspan="2">
          <template slot-scope="scope1">
            <el-button type="text" @click="addInnerRow(scope1.$index)"
              >新增</el-button
            >
            <el-table
              v-if="scope1.$index >= 0"
              :data="data.options.effect[scope1.$index].effects"
              :border="hiddenTableHeader"
              stripe
              style="width: 100%;"
              :show-header="hiddenTableHeader"
            >
              <el-table-column label="所选值">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.target" placeholder="请选择">
                    <el-option
                      v-for="item in controlsItem"
                      :key="item.model"
                      :value="item.model"
                      :label="item.name"
                    >
                    </el-option>
                  </el-select>
                  &nbsp;
                  <el-select v-model="scope.row.type" placeholder="请选择">
                    <el-option label="隐藏" value="n">隐藏</el-option>
                    <el-option label="显示" value="w">显示</el-option>
                    <el-option label="必填" value="b">必填</el-option>
                  </el-select>
                  &nbsp;
                  <el-button
                    type="text"
                    @click="delInnerRow(scope1.$index, scope.$index)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="变换类型">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.edit"
              type="text"
              size="medium"
              @click="confirmAdd(scope.row)"
            >
              <i class="el-icon-check" aria-hidden="true"></i>
            </el-button>
            <div v-else>
              <!--                            <el-button type="text" size="medium" @click="editData(scope.row)">-->
              <!--                                <i class="el-icon-edit" aria-hidden="true"></i>-->
              <!--                            </el-button>-->
              <el-button
                type="text"
                size="medium"
                @click="handleDeleteEffect(scope.row, scope.$index)"
              >
                <i class="el-icon-delete" aria-hidden="true"></i>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <!--                <el-table-column prop="rule" label="校验规则">

                                </el-table-column>-->
        <el-table-column label="操作"> </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleClose(data)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-form label-position="left">
      <el-form-item label="显示标题">
        <el-checkbox v-model="data.options.showTitle"></el-checkbox>
      </el-form-item>
      <el-form-item label="显示批注">
        <el-checkbox v-model="data.options.showAnnotation"></el-checkbox>
      </el-form-item>

      <el-form-item
        label="标题"
        v-if="data.type != 'grid' && data.type != 'subTable'"
      >
        <el-input class="custom_input" v-model="data.name"></el-input>
      </el-form-item>
      <el-form-item
        label="表单字段"
        v-if="data.type != 'grid' && data.type != 'subTable'"
      >
        <el-select
          v-model="data.model"
          placeholder="请选择"
          @change="changeFormProperties"
        >
          <el-option
            v-for="item in formProperties"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="布局"
        v-if="
          data.type != 'grid' &&
            data.type != 'subTable' &&
            data.type != 'dividers' &&
            data.type != 'divider' &&
            data.type != 'block' &&
            data.type != 'table'
        "
        label-width="50px"
      >
        <el-slider
          v-model="data.options.span"
          :max="24"
          :min="1"
          :marks="{ 12: '' }"
          @change="spanChange"
          style="margin-left: 45px"
        />
      </el-form-item>

      <el-form-item label="计量单位" v-if="data.type == 'input'">
        <template>
          <el-select
            v-model="data.options.unit"
            placeholder="请选择"
            @change="onSelectedControlType($event, item)"
          >
            <el-option-group
              v-for="group in unitOptions"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-option-group>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item
        label="控件类型"
        v-if="
          data.type != 'grid' &&
            data.type != 'text' &&
            data.type != 'tabs' &&
            data.type != 'h4' &&
            data.type != 'inputNumber' &&
            data.type != 'badge' &&
            data.type != 'tag' &&
            data.type != 'link' &&
            data.type != 'dateCalendar' &&
            data.type != 'progress' &&
            data.type != 'table' &&
            data.type != 'block' &&
            data.type != 'subTable' &&
            data.type != 'processInfo' &&
            data.type != 'h4' &&
            data.type != 'p' &&
            data.type != 'small' &&
            data.type != 'mark' &&
            data.type != 'del' &&
            data.type != 'u' &&
            data.type != 'em' &&
            data.type != 'strong' &&
            data.type != 'color' &&
            data.type != 'rate' &&
            data.type != 'breadcrumb' &&
            data.type != 'steps' &&
            data.type != 'card' &&
            data.type != 'icon' &&
            data.type != 'alert' &&
            data.type != 'dividers' &&
            data.type != 'collapse' &&
            data.type != 'iframe' &&
            data.type != 'divider' &&
            data.type != 'fileUpload'
        "
      >
        <template>
          <el-select
            v-model="data.type"
            placeholder="请选择"
            @change="onSelectedControlType($event)"
          >
            <el-option-group
              v-for="group in options"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-option-group>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item label="小圆点" v-if="data.type == 'badge'">
        <template>
          <el-switch v-model="data.options.dot"></el-switch>
        </template>
      </el-form-item>
      <el-form-item label="值" v-if="data.type == 'badge'">
        <template>
          <el-input
            class="custom_input"
            v-model="data.options.defaultValue"
          ></el-input>
        </template>
      </el-form-item>
      <el-form-item label="组件尺寸" v-if="data.type == 'inputNumber'">
        <template>
          <el-radio-group v-model="data.options.radioSize">
            <el-radio-button label="medium">大型</el-radio-button>
            <el-radio-button label="small">小型</el-radio-button>
            <el-radio-button label="mini">迷你</el-radio-button>
          </el-radio-group>
        </template>
      </el-form-item>

      <el-form-item label="链接地址" v-if="data.type == 'iframe'">
        <template>
          <el-input
            class="custom_input"
            type="textarea"
            v-model="data.options.src"
          ></el-input>
        </template>
      </el-form-item>
      <el-form-item v-if="data.type == 'dialog'">
        <template>
          <div class="ng-scope">
            <div class="input-group">
              <el-form-item label="选择对话框">
                <el-select
                  v-model="data.options.customDialogAlias"
                  placeholder="请选择"
                  @click.native="getAllDialogDate"
                  @change="getAllDialogDate"
                >
                  <el-option
                    v-for="item in customDialogDataValue"
                    :key="item.alias"
                    :label="item.name"
                    :value="item.alias"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="input-group">
              <el-form-item label="设置返回值">
                <el-button type="danger" @click="setCustDialogRes"
                  >设置返回值</el-button
                >
              </el-form-item>
            </div>
            <div class="input-group">
              <el-form-item label="按钮名称">
                <el-input
                  class="custom_input"
                  v-model="data.options.btnName"
                ></el-input>
              </el-form-item>
            </div>
            <div class="input-group">
              <el-form-item label="按钮图标" class="custom_input">
                <icon-picker v-model="data.options.icon"></icon-picker>
              </el-form-item>
            </div>
          </div>
        </template>
      </el-form-item>
      <el-form-item v-if="data.type == 'userDialog'">
        <el-form-item label="按钮名称">
          <el-input
            class="custom_input"
            v-model="data.options.btnName"
          ></el-input>
        </el-form-item>
        <el-form-item label="按钮图标" class="custom_input">
          <icon-picker v-model="data.options.icon"></icon-picker>
        </el-form-item>

        <template>
          <div class="ng-scope">
            <div class="input-group">
              <el-form-item label="选择器设置">
                <el-select
                  v-model="data.options.selectorType"
                  placeholder="请选择"
                  @click.native="getAllUserDialogSelectorList"
                  @change="getAllUserDialogData"
                >
                  <el-option
                    v-for="item in userDialogSelectorList"
                    :key="item.alias"
                    :label="item.name"
                    :value="item.alias"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <el-form-item label="多选设置">
            <el-checkbox v-model="data.options.isSingle">多选</el-checkbox>
          </el-form-item>
        </template>
      </el-form-item>
      <el-dialog
        title=""
        :visible.sync="setCustDialogResFormVisible"
        :append-to-body="true"
        width="40%"
      >
        <el-table :data="data.options.chooseFiledList">
          <el-table-column prop="columnKey" label="返回结果字段">
          </el-table-column>
          <el-table-column label="绑定显示的属性">
            <template slot-scope="scope">
              <el-select
                v-model="data.options.chooseFiledList[scope.$index].target"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in controlsItem"
                  :key="item.model"
                  :value="item.model"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="解除绑定">
            <template slot-scope="scope">
              <el-button type="danger" @click="unBindTarget(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>

          <!--                        <el-table-column-->
          <!--                                v-for="item in resultFieldArray"  :prop="item.columnKey" :label="item.columnKey">-->

          <!--                        </el-table-column>-->
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setCustDialogResFormVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click.native="confirmFormCustomDialog()"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-form-item
        label="宽度"
        v-if="Object.keys(data.options).indexOf('width') >= 0"
      >
        <el-input class="custom_input" v-model="data.options.width"></el-input>
      </el-form-item>

      <el-form-item
        label="高度"
        v-if="Object.keys(data.options).indexOf('height') >= 0"
      >
        <el-input class="custom_input" v-model="data.options.height"></el-input>
      </el-form-item>

      <!--            <el-form-item label="大小" v-if="Object.keys(data.options).indexOf('sizes')>=0">-->

      <!--                宽度：-->
      <!--                <el-input class="custom_input"  type="number" v-model.number="data.options.sizes.width"></el-input>-->
      <!--                高度：-->
      <!--                <el-input  class="custom_input"  type="number" v-model.number="data.options.sizes.height"></el-input>-->
      <!--            </el-form-item>-->

      <el-form-item
        label="填写说明"
        v-if="
          Object.keys(data.options).indexOf('placeholder') >= 0 &&
            (data.type != 'time' ||
              data.type != 'date' ||
              data.type != 'dialog')
        "
      >
        <el-input
          class="custom_input"
          v-model="data.options.placeholder"
        ></el-input>
      </el-form-item>

      <!--            <el-form-item label="标签是否标红" v-if="Object.keys(data.options).indexOf('showRed')>=0">-->
      <!--                <el-switch v-model="data.options.showRed">-->
      <!--                </el-switch>-->
      <!--            </el-form-item>-->

      <!--            <el-form-item label="字段提示"-->
      <!--                          v-if="data.type!='processInfo' && data.type!='iframe' && data.type!='divider' && data.type!='text'">-->
      <!--                <el-input v-model="data.options.tip"></el-input>-->
      <!--            </el-form-item>-->
      <el-form-item label="区域布局" v-if="data.type == 'block'">
        <el-radio-group
          v-model="blockLayout"
          @change="layOutableColumnsChange($event, data.key)"
        >
          <el-radio-button label="12">两列</el-radio-button>
          <el-radio-button label="8">三列</el-radio-button>
          <el-radio-button label="6">四列</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="布局方式"
        v-if="Object.keys(data.options).indexOf('inline') >= 0"
      >
        <el-radio-group v-model="data.options.inline">
          <el-radio-button :label="false">块级</el-radio-button>
          <el-radio-button :label="true">行内</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="显示输入框"
        v-if="Object.keys(data.options).indexOf('showInput') >= 0"
      >
        <el-switch v-model="data.options.showInput"></el-switch>
      </el-form-item>
      <el-form-item
        label="最小值"
        v-if="Object.keys(data.options).indexOf('min') >= 0"
        class="custom_input"
      >
        <el-input-number
          v-model="data.options.min"
          :min="0"
          :max="100"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="最大值"
        v-if="Object.keys(data.options).indexOf('max') >= 0"
        class="custom_input"
      >
        <el-input-number
          v-model="data.options.max"
          :min="0"
          :max="100"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="步长"
        v-if="Object.keys(data.options).indexOf('step') >= 0"
        class="custom_input"
      >
        <el-input-number
          v-model="data.options.step"
          :min="0"
          :max="100"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="是否多选"
        v-if="data.type == 'imgupload' || data.type == 'fileUpload'"
      >
        <el-switch
          v-model="data.options.multiple"
          @change="handleSelectMuliple"
        ></el-switch>
      </el-form-item>
      <el-form-item label="是否可搜索" v-if="data.type == 'select'">
        <el-switch v-model="data.options.filterable"></el-switch>
      </el-form-item>
      <el-form-item
        label="允许半选"
        v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
      >
        <el-switch v-model="data.options.allowHalf"> </el-switch>
      </el-form-item>
      <el-form-item
        label="支持透明度"
        v-if="Object.keys(data.options).indexOf('showAlpha') >= 0"
      >
        <el-switch v-model="data.options.showAlpha"> </el-switch>
      </el-form-item>
      <el-form-item
        label="是否显示标签"
        v-if="Object.keys(data.options).indexOf('showLabel') >= 0"
      >
        <el-switch v-model="data.options.showLabel"> </el-switch>
      </el-form-item>

      <el-form-item label="是否显示边框" v-if="data.type == 'radio'">
        <el-switch v-model="data.options.border"></el-switch>
      </el-form-item>
      <el-form-item label="是否禁用" v-if="data.type == 'radio'">
        <el-switch v-model="data.options.disabled">></el-switch>
      </el-form-item>

      <template v-if="data.type == 'tag'">
        <el-form-item label="尺寸">
          <el-radio-group v-model="data.options.radioSize">
            <el-radio-button label="medium">大</el-radio-button>
            <el-radio-button label="small">中</el-radio-button>
            <el-radio-button label="mini">小</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </template>
      <template v-if="data.type == 'progress'">
        <el-form-item label="显示类型">
          <el-radio-group v-model="data.options.progressType">
            <el-radio-button label="line">线</el-radio-button>
            <el-radio-button label="circle">圆</el-radio-button>
            <el-radio-button label="dashboard">仪表</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-radio-group v-model="data.options.status">
            <el-radio-button label="success">成功</el-radio-button>
            <el-radio-button label="exception">异常</el-radio-button>
            <el-radio-button label="warning">警告</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示文字">
          <el-switch v-model="data.options.showText"> </el-switch>
        </el-form-item>
        <el-form-item label="进度">
          <el-input-number
            v-model="data.options.percentage"
            :min="1"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="进度条宽度">
          <el-input-number
            v-model="data.options.strokeWidth"
            :min="1"
            :max="100"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="内显示">
          <el-switch v-model="data.options.textInside"> </el-switch>
        </el-form-item>
      </template>

      <template v-if="data.type == 'breadcrumb'">
        <draggable
          tag="ul"
          :list="data.options.breadcrumbItemOptions"
          v-bind="{
            group: { name: 'options' },
            ghostClass: 'ghost',
            handle: '.drag-item'
          }"
          handle=".drag-item"
        >
          <li
            v-for="(item, index) in data.options.breadcrumbItemOptions"
            :key="index"
          >
            <span :label="item.value" style="margin-right: 5px;">
              <el-input
                style="width: 120px"
                size="mini"
                v-model="item.value"
              ></el-input>
              <el-switch v-model="item.replace"></el-switch>

              <el-input
                style="width:90px;"
                size="mini"
                v-if="data.options.showLabel"
                v-model="item.label"
              ></el-input>
            </span>
            <i
              class="drag-item"
              style="font-size: 16px;margin: 0 5px;cursor: move;"
              ><i class="iconfont icon-icon_bars"></i
            ></i>
            <el-button
              @click="handleOptionsRemove(index)"
              circle
              plain
              type="danger"
              size="mini"
              icon="el-icon-minus"
              style="padding: 4px;margin-left: 5px;"
            ></el-button>
          </li>
        </draggable>

        <div style="margin-left: 22px;">
          <el-button
            @click="handleAddItemOptions"
            type="primary"
            icon="el-icon-plus"
            >添加选项</el-button
          >
        </div>
      </template>

      <template v-if="data.type == 'breadcrumb'">
        <el-form-item label="分隔符" style="margin-top: 22px;">
          <el-input
            class="custom_input"
            v-model="data.options.separator"
          ></el-input>
        </el-form-item>
      </template>

      <template v-if="data.type == 'link'">
        <el-form-item label="链接名称">
          <el-input
            class="custom_input"
            v-model="data.options.defaultValue"
          ></el-input>
        </el-form-item>
        <el-form-item label="链接URL">
          <el-input class="custom_input" v-model="data.options.href"></el-input>
        </el-form-item>
        <el-form-item label="下划线">
          <el-switch v-model="data.options.underline"> </el-switch>
        </el-form-item>
      </template>

      <template v-if="data.type == 'collapse'">
        <el-form-item label="手风琴">
          <el-switch v-model="data.options.accordion"> </el-switch>
        </el-form-item>
        <el-form-item label="面板">
          <draggable
            tag="ul"
            :list="data.options.options"
            v-bind="{
              group: { name: 'options' },
              ghostClass: 'ghost',
              handle: '.drag-item'
            }"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.options.options" :key="index">
              <el-radio
                v-model="data.options.activeName"
                :label="item.value"
                style="margin-right: 5px;"
              >
                <el-input
                  :style="{ width: data.options.showLabel ? '90px' : '180px' }"
                  size="mini"
                  v-model="item.value"
                ></el-input>
                <el-input
                  style="width:90px;"
                  size="mini"
                  v-if="data.options.showLabel"
                  v-model="item.label"
                ></el-input>
              </el-radio>
              <i
                class="drag-item"
                style="font-size: 16px;margin: 0 5px;cursor: move;"
                ><i class="iconfont icon-icon_bars"></i
              ></i>
              <el-button
                @click="handleOptionsRemove(index)"
                circle
                plain
                type="danger"
                size="mini"
                icon="el-icon-minus"
                style="padding: 4px;margin-left: 5px;"
              ></el-button>
            </li>
          </draggable>
          <div style="margin-left: 22px;">
            <el-button
              @click="handleAddCollapseOption"
              type="primary"
              icon="el-icon-plus"
              >添加选项</el-button
            >
          </div>
        </el-form-item>
      </template>
      <template v-if="data.type == 'btn'">
        <el-form-item label="文本">
          <el-input class="custom_input" v-model="data.options.name"></el-input>
        </el-form-item>
        <el-form-item label="组件尺寸">
          <template>
            <el-radio-group v-model="data.options.radioSize">
              <el-radio-button label="medium">大型</el-radio-button>
              <el-radio-button label="small">小型</el-radio-button>
              <el-radio-button label="mini">迷你</el-radio-button>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="类型">
          <template>
            <el-select v-model="data.options.type" placeholder="请选择">
              <el-option
                v-for="item in btnOptionsType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="朴素">
          <el-switch v-model="data.options.plain"></el-switch>
        </el-form-item>
        <el-form-item label="圆角">
          <el-switch v-model="data.options.round"></el-switch>
        </el-form-item>
        <el-form-item label="圆形">
          <el-switch v-model="data.options.circle"></el-switch>
        </el-form-item>
        <el-form-item label="加载中">
          <el-switch v-model="data.options.loading"></el-switch>
        </el-form-item>
        <el-form-item label="按钮图标" class="custom_input">
          <icon-picker v-model="data.options.icon"></icon-picker>
        </el-form-item>
        <el-form-item label="按钮偏移" class="custom_input">
          <el-tooltip class="item" effect="dark" placement="top-start">
            <div slot="content">支持百分比或者像素 <br />px或者%需要填写</div>

            <el-input
              class="custom_input"
              v-model="data.options.marginLeft"
            ></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="点击事件">
          <el-tooltip class="item" effect="dark" placement="top-start">
            <div slot="content">
              在JS增强输入框里除了可以用挂载到window中的全局变量之外，
              <br />还可以用我们给你封装好的几个变量以及方法， <br />
              他们分别如下 <br />
              vm Vue实例，可以调用Vue的一系列的方法，例如 vm.$nextTick();
              <br />api 封装了一下api，具体如下 <br />
              api.getFormData(key) <br />setFormData(key, value)
              设置form表单的值 show(key) 显示一个或多个组件 <br />hide(key)
              隐藏一个或多个组件 api.validate()校验表单 <br />api.resetFields()
              重置表单
            </div>

            <el-input
              class="custom_input"
              v-model="data.options.jsExpand"
              type="textarea"
              :rows="6"
              clearable
            ></el-input>
          </el-tooltip>
        </el-form-item>
      </template>
      <template v-if="data.type == 'alert'">
        <el-form-item label="标题">
          <el-input
            class="custom_input"
            v-model="data.options.title"
          ></el-input>
        </el-form-item>
        <el-form-item label="关闭按钮文字">
          <el-input
            class="custom_input"
            v-model="data.options.closeText"
          ></el-input>
        </el-form-item>
        <el-form-item label="主题">
          <el-select v-model="data.options.alertType" placeholder="请选择">
            <el-option
              v-for="item in alertType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择提供主题">
          <el-select v-model="data.options.item" placeholder="请选择">
            <el-option
              v-for="item in effectType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示图标" class="custom_input">
          <el-switch v-model="data.options.showIcon"> </el-switch>
        </el-form-item>
        <el-form-item label="可关闭" class="custom_input">
          <el-switch v-model="data.options.closable"> </el-switch>
        </el-form-item>
        <el-form-item label="文字居中" class="custom_input">
          <el-switch v-model="data.options.center"> </el-switch>
        </el-form-item>
      </template>
      <template v-if="data.type == 'icon'">
        <el-form-item label="文本">
          <el-input
            class="custom_input"
            type="textarea"
            v-model="data.options.defaultValue"
          ></el-input>
        </el-form-item>
      </template>
      <template v-if="data.type == 'card'">
        <el-form-item label="头部">
          <el-input
            class="custom_input"
            v-model="data.options.header"
          ></el-input>
        </el-form-item>
        <el-form-item label="阴影" label-width="50px">
          <el-radio-group v-model="data.options.shadow">
            <el-radio-button label="always">一直</el-radio-button>
            <el-radio-button label="hover">鼠标悬停</el-radio-button>
            <el-radio-button label="never">从不</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </template>

      <template v-if="data.type == 'steps'">
        <el-form-item label="重置进度">
          <el-button
            @click="handleResetOptions"
            type="primary"
            icon="el-icon-plus"
            >重置</el-button
          >
        </el-form-item>

        <el-form-item label="居中对齐">
          <el-switch v-model="data.options.alignCenter"> </el-switch>
        </el-form-item>
        <el-form-item label="简洁风格">
          <el-switch v-model="data.options.simple"> </el-switch>
        </el-form-item>
        <el-form-item label="当前步骤状态">
          <el-select v-model="data.options.processStatus">
            <el-option
              v-for="item in finishStatus"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结束步骤状态">
          <el-select v-model="data.options.finishStatus">
            <el-option
              v-for="item in finishStatus"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向">
          <el-radio-group
            v-model="data.options.direction"
            @change="directionChange($event)"
            size="small"
          >
            <el-radio-button label="horizontal">水平</el-radio-button>
            <el-radio-button label="vertical">垂直</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <!--                <el-form-item label="步骤间距" >-->
        <!--                    <el-input-number v-model="data.options.space" :min="0" :max="9999" :step="1"></el-input-number>-->
        <!--                </el-form-item>-->

        <draggable
          tag="ul"
          :list="data.options.stepItemOptions"
          v-bind="{
            group: { name: 'options' },
            ghostClass: 'ghost',
            handle: '.drag-item'
          }"
          handle=".drag-item"
        >
          <li
            v-for="(item, index) in data.options.stepItemOptions"
            :key="index"
          >
            <span :label="item.value" style="margin-right: 5px;">
              <el-input
                style="width: 120px"
                size="mini"
                v-model="item.value"
              ></el-input>
            </span>
            <i
              class="drag-item"
              style="font-size: 16px;margin: 0 5px;cursor: move;"
              ><i class="iconfont icon-icon_bars"></i
            ></i>
            <el-button
              @click="handleOptionsRemove(index)"
              circle
              plain
              type="danger"
              size="mini"
              icon="el-icon-minus"
              style="padding: 4px;margin-left: 5px;"
            ></el-button>
          </li>
        </draggable>

        <div style="margin-left: 22px;margin-top: 2px">
          <el-button
            @click="handleAddStepItemOptions"
            type="primary"
            icon="el-icon-plus"
            >添加选项</el-button
          >
        </div>
      </template>

      <template v-if="data.type == 'tag'">
        <el-checkbox-group
          v-model="data.options.defaultValue"
          @change="changeCheckbox"
        >
          <draggable
            tag="ul"
            :list="data.options.options"
            v-bind="{
              group: { name: 'options' },
              ghostClass: 'ghost',
              handle: '.drag-item'
            }"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.options.options" :key="index">
              <el-checkbox :label="item.value" style="margin-right: 5px;">
                <el-input
                  style="width:90px;"
                  size="mini"
                  v-model="item.value"
                ></el-input>
                <el-input
                  style="width:90px;"
                  size="mini"
                  v-model="item.label"
                ></el-input>
              </el-checkbox>
              <i
                class="drag-item"
                style="font-size: 16px;margin: 0 5px;cursor: move;"
                ><i class="iconfont icon-icon_bars"></i
              ></i>
              <el-button
                @click="handleOptionsRemove(index)"
                circle
                plain
                type="danger"
                size="mini"
                icon="el-icon-minus"
                style="padding: 4px;margin-left: 5px;"
              ></el-button>
            </li>
          </draggable>
        </el-checkbox-group>

        <div style="margin-left: 22px;">
          <el-button @click="handleAddOption" type="primary" icon="el-icon-plus"
            >添加选项</el-button
          >
        </div>
      </template>

      <el-form-item
        label="选项"
        v-if="
          Object.keys(data.options).indexOf('options') >= 0 &&
            data.type != 'tabs' &&
            data.type != 'tag' &&
            data.type != 'collapse'
        "
      >
        <el-radio-group
          v-model="data.options.remote"
          size="mini"
          style="margin-bottom:10px;"
        >
          <el-radio-button :label="false">固定选项</el-radio-button>

          <el-radio-button v-if="data.type != 'checkbox'" :label="true"
            >动态选项</el-radio-button
          >
        </el-radio-group>
        <template v-if="data.options.remote && data.options.type != 'checkbox'">
          <div>
            <el-form-item label="接口">
              <el-select
                v-model="data.options.remoteUrlKey"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in remoteFuncs"
                  :key="item.alias"
                  :label="item.name"
                  :value="item.alias"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="操作" v-if="data.options.remoteUrlKey">
              <el-button
                @click="handleAddEffects"
                type="danger"
                icon="el-icon-s-promotion"
                >级联设置
              </el-button>
            </el-form-item>
            <!--                        <div class="input-group">-->
            <!--                            <span class="input-group-addon">&nbsp;&nbsp;&nbsp;&nbsp;值：</span>-->
            <!--                            <el-select v-model="data.options.props.value"  clearable  placeholder="请选择" @click.native="getRemoteField"-->

            <!--                                       @change="getRemoteField">-->
            <!--                                <el-option-->
            <!--                                        v-for="item in remoteFuncsFields"-->
            <!--                                        :key="item.description"-->
            <!--                                        :label="item.defaultValue"-->
            <!--                                        :value="item.description">-->
            <!--                                </el-option>-->
            <!--                            </el-select>-->
            <!--                        </div>-->

            <!--                        <div class="input-group">-->
            <!--                            <span class="input-group-addon">标签：</span>-->
            <!--                            <el-select v-model="data.options.props.label"  clearable   placeholder="请选择" @click.native="getRemoteField"-->

            <!--                                       @change="getRemoteField">-->
            <!--                                <el-option-->
            <!--                                        v-for="item in remoteFuncsFields"-->
            <!--                                        :key="item.description"-->
            <!--                                        :label="item.defaultValue"-->
            <!--                                        :value="item.description">-->
            <!--                                </el-option>-->
            <!--                            </el-select>-->
            <!--                        </div>-->
          </div>
        </template>
        <template v-else>
          <template
            v-if="
              data.type == 'radio' ||
                (data.type == 'select' && !data.options.multiple)
            "
          >
            <el-radio-group v-model="data.options.defaultValue">
              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{
                  group: { name: 'options' },
                  ghostClass: 'ghost',
                  handle: '.drag-item'
                }"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-radio :label="item.value" style="margin-right: 5px;">
                    <el-input
                      :style="{
                        width: data.options.showLabel ? '90px' : '180px'
                      }"
                      size="mini"
                      v-model="item.value"
                    ></el-input>
                    <el-input
                      style="width:90px;"
                      size="mini"
                      v-if="data.options.showLabel"
                      v-model="item.label"
                    ></el-input>
                    <!-- <input v-model="item.value"/> -->
                  </el-radio>
                  <i
                    class="drag-item"
                    style="font-size: 16px;margin: 0 5px;cursor: move;"
                    ><i class="iconfont icon-icon_bars"></i
                  ></i>
                  <el-button
                    @click="handleOptionsRemove(index)"
                    circle
                    plain
                    type="danger"
                    size="mini"
                    icon="el-icon-minus"
                    style="padding: 4px;margin-left: 5px;"
                  ></el-button>
                </li>
              </draggable>
            </el-radio-group>
          </template>

          <template v-if="data.type == 'select' && data.options.multiple">
            <el-checkbox-group v-model="data.options.defaultValue">
              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{
                  group: { name: 'options' },
                  ghostClass: 'ghost',
                  handle: '.drag-item'
                }"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-checkbox :label="item.value" style="margin-right: 5px;">
                    <el-input
                      :style="{
                        width: data.options.showLabel ? '90px' : '180px'
                      }"
                      size="mini"
                      v-model="item.value"
                    ></el-input>
                    <el-input
                      style="width:90px;"
                      size="mini"
                      v-if="data.options.showLabel"
                      v-model="item.label"
                    ></el-input>
                  </el-checkbox>
                  <i
                    class="drag-item"
                    style="font-size: 16px;margin: 0 5px;cursor: move;"
                    ><i class="iconfont icon-icon_bars"></i
                  ></i>
                  <el-button
                    @click="handleOptionsRemove(index)"
                    circle
                    plain
                    type="danger"
                    size="mini"
                    icon="el-icon-minus"
                    style="padding: 4px;margin-left: 5px;"
                  ></el-button>
                </li>
              </draggable>
            </el-checkbox-group>
          </template>
          <template v-if="data.type == 'checkbox'">
            <el-checkbox-group v-model="data.options.defaultValue">
              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{
                  group: { name: 'options' },
                  ghostClass: 'ghost',
                  handle: '.drag-item'
                }"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-checkbox
                    @change="changeCheckbox"
                    :label="item.value"
                    style="margin-right: 5px;"
                  >
                    <el-input
                      :style="{
                        width: data.options.showLabel ? '90px' : '180px'
                      }"
                      size="mini"
                      v-model="item.value"
                    ></el-input>
                    <el-input
                      style="width:90px;"
                      size="mini"
                      v-if="data.options.showLabel"
                      v-model="item.label"
                    ></el-input>
                  </el-checkbox>
                  <i
                    class="drag-item"
                    style="font-size: 16px;margin: 0 5px;cursor: move;"
                    ><i class="iconfont icon-icon_bars"></i
                  ></i>
                  <el-button
                    @click="handleOptionsRemove(index)"
                    circle
                    plain
                    type="danger"
                    size="mini"
                    icon="el-icon-minus"
                    style="padding: 4px;margin-left: 5px;"
                  ></el-button>
                </li>
              </draggable>
            </el-checkbox-group>
          </template>
        </template>
        <div style="margin-left: 22px;">
          <el-button @click="handleAddOption" type="primary" icon="el-icon-plus"
            >添加选项</el-button
          >
          <el-button
            v-if="data.type != 'checkbox'"
            @click="handleAddEffects"
            type="danger"
            icon="el-icon-s-promotion"
            >级联设置
          </el-button>
        </div>
      </el-form-item>
      <template v-if="data.type == 'tabs'">
        <el-form-item label="自撑开">
          <el-switch v-model="data.options.stretch"> </el-switch>
        </el-form-item>
        <el-form-item label="位置">
          <el-select v-model="data.options.tabPosition" placeholder="请选择">
            <el-option
              v-for="item in tabPosition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风格">
          <el-select v-model="data.options.tabsType" placeholder="请选择">
            <el-option
              v-for="item in tabsType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标签页">
          <draggable
            tag="ul"
            :list="data.options.options"
            v-bind="{
              group: { name: 'options' },
              ghostClass: 'ghost',
              handle: '.drag-item'
            }"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.options.options" :key="index">
              <el-radio
                v-model="data.options.activeName"
                :label="item.value"
                style="margin-right: 5px;"
              >
                <el-input
                  :style="{ width: data.options.showLabel ? '90px' : '180px' }"
                  size="mini"
                  v-model="item.value"
                ></el-input>
                <el-input
                  style="width:90px;"
                  size="mini"
                  v-if="data.options.showLabel"
                  v-model="item.label"
                ></el-input>
              </el-radio>
              <i
                class="drag-item"
                style="font-size: 16px;margin: 0 5px;cursor: move;"
                ><i class="iconfont icon-icon_bars"></i
              ></i>
              <el-button
                @click="handleOptionsRemove(index)"
                circle
                plain
                type="danger"
                size="mini"
                icon="el-icon-minus"
                style="padding: 4px;margin-left: 5px;"
              ></el-button>
            </li>
          </draggable>
          <div style="margin-left: 22px;">
            <el-button
              @click="handleAddTabsOption"
              type="primary"
              icon="el-icon-plus"
              >添加选项</el-button
            >
          </div>
        </el-form-item>
      </template>

      <el-form-item label="级联方式" v-if="data.type == 'cascader'">
        <div>
          <el-select
            v-model="data.options.modeMethod"
            placeholder="请选择"
            @change="changeCity($event)"
          >
            <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!--                    <el-input size="mini" style="" v-model="data.options.props.value">-->
          <!--                        <template slot="prepend">值</template>-->
          <!--                    </el-input>-->
          <!--                    <el-input size="mini" style="" v-model="data.options.props.label">-->
          <!--                        <template slot="prepend">标签</template>-->
          <!--                    </el-input>-->
          <!--                    <el-input size="mini" style="" v-model="data.options.props.children">-->
          <!--                        <template slot="prepend">子选项</template>-->
          <!--                    </el-input>-->
        </div>
      </el-form-item>
      <el-form-item
        label="文本内容"
        v-if="
          Object.keys(data.options).indexOf('defaultValue') >= 0 &&
            data.type == 'text'
        "
      >
        <el-input
          class="custom_input"
          v-if="data.type == 'input' || data.type == 'text'"
          v-model="data.options.defaultValue"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="是否加粗"
        v-if="
          Object.keys(data.options).indexOf('defaultValue') >= 0 &&
            data.type == 'text'
        "
      >
        <el-switch v-model="data.options.bold" active-text="是否加粗">
        </el-switch>
      </el-form-item>
      <el-form-item
        label="字体颜色"
        v-if="
          Object.keys(data.options).indexOf('defaultValue') >= 0 &&
            data.type == 'text'
        "
      >
        <el-color-picker
          v-model="data.options.color"
          show-alpha
          :predefine="predefineColors"
        >
        </el-color-picker>
      </el-form-item>
      <el-form-item
        label="字体样式"
        v-if="
          Object.keys(data.options).indexOf('defaultValue') >= 0 &&
            data.type == 'text'
        "
      >
        <el-input
          class="custom_input"
          v-model="data.options.fontSize"
          placeholder="字体大小（px）"
          type="number"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="默认值"
        v-if="
          Object.keys(data.options).indexOf('defaultValue') >= 0 &&
            (data.type == 'textarea' ||
              data.type == 'input' ||
              data.type == 'rate' ||
              data.type == 'color' ||
              data.type == 'switch')
        "
      >
        <el-input
          class="custom_input"
          v-if="data.type == 'textarea'"
          type="textarea"
          :rows="2"
          v-model="data.options.defaultValue"
        ></el-input>
        <el-input
          class="custom_input"
          v-if="data.type == 'input' || data.type == 'text'"
          v-model="data.options.defaultValue"
        ></el-input>
        <el-rate
          v-if="data.type == 'rate'"
          style="display:inline-block;vertical-align: middle;"
          :max="data.options.max"
          :allow-half="data.options.allowHalf"
          v-model="data.options.defaultValue"
        ></el-rate>
        <el-button
          type="text"
          v-if="data.type == 'rate'"
          style="display:inline-block;vertical-align: middle;margin-left: 10px;"
          @click="data.options.defaultValue = 0"
          >清空
        </el-button>
        <el-color-picker
          v-if="data.type == 'color'"
          v-model="data.options.defaultValue"
          :show-alpha="data.options.showAlpha"
        ></el-color-picker>
        <el-switch
          v-if="data.type == 'switch'"
          v-model="data.options.defaultValue"
        ></el-switch>
      </el-form-item>

      <template v-if="data.type == 'input'">
        <!--               非日期-->
        <el-checkbox v-model="data.options.dateCalculation"
          >日期计算
        </el-checkbox>
        <div v-if="data.options.dateCalculation" class="ng-scope">
          <div class="input-group">
            <span class="input-group-addon">开始日期：</span>
            <el-select
              v-model="data.options.dateCalculationStart"
              placeholder="请选择"
              @click.native="getAllDate"
              @change="getAllDate"
            >
              <el-option
                v-for="item in dateValue"
                :key="item.model"
                :label="item.name"
                :value="item.model"
              >
              </el-option>
            </el-select>
          </div>
          <br />
          <div class="input-group">
            <span class="input-group-addon">结束日期：</span>
            <el-select
              v-model="data.options.dateCalculationEnd"
              placeholder="请选择"
              @click.native="getAllDate"
              @change="getAllDate"
            >
              <el-option
                v-for="item in dateValue"
                :key="item.model"
                :label="item.name"
                :value="item.model"
              >
              </el-option>
            </el-select>
          </div>
          <div class="input-group" style="margin-top: 10px;">
            <el-form-item label="计算周期">
              <el-radio-group v-model="data.options.dateCalcDiffType">
                <!--                            <el-radio label="month">月份</el-radio>-->
                <el-radio label="day">天</el-radio>
                <el-radio label="hour">小时</el-radio>
                <el-radio label="minute">分钟</el-radio>
                <el-radio label="second">秒</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </template>
      <template v-if="data.type == 'date'">
        <!--                日期校验-->
        <div class="input-group" style="margin-top: 10px;">
          <div class="input-group">
            <el-form-item
              label="日期校验"
              v-if="data.type == 'date'"
              label-width="100px"
            >
              <el-radio-group v-model="data.options.dateValidRule">
                <!--                            <el-radio label="month">月份</el-radio>-->
                <el-radio label=">=">大于等于</el-radio>
                <el-radio label="<=">小于等于</el-radio>
                <el-radio label=">">大于</el-radio>
                <el-radio label="<">小于</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="input-group">
            <el-form-item label="其他日期" v-if="data.type == 'date'">
              <el-select
                v-model="data.options.ckeckedDatevalidType"
                placeholder="请选择"
                @click.native="getAllDateNotSelf"
                @change="changeDateRule($event, item)"
              >
                <el-option
                  v-for="item in dateValue"
                  :key="item.model"
                  :label="item.name"
                  :value="item.model"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </template>
      <template v-if="data.type == 'time' || data.type == 'date'">
        <el-form-item label="日期类型" v-if="data.type == 'date'">
          <el-select v-model="data.options.type" placeholder="请选择日期类型">
            <el-option
              v-for="item in formatDateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="格式">
          <el-select
            v-model="data.options.format"
            placeholder="请选择时间格式"
            @change="onSelectedDateType($event, item)"
          >
            <el-option
              v-for="item in formatOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="默认值"
          v-if="
            data.type == 'time' &&
              Object.keys(data.options).indexOf('rangeAble') >= 0
          "
        >
          <el-time-picker
            key="1"
            style="width: 100%;"
            v-if="!data.options.rangeAble"
            v-model="data.options.defaultValue"
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          >
          </el-time-picker>
          <el-time-picker
            key="2"
            v-if="data.options.rangeAble"
            style="width: 100%;"
            v-model="data.options.defaultValue"
            is-range
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          >
          </el-time-picker>
        </el-form-item>
      </template>
      <template v-if="data.type == 'imgupload'">
        <el-form-item label="支持的类型" label-width="100px">
          <el-row :span="30">
            <el-checkbox-group v-model="data.options.supportedTypes">
              <span
                v-for="(item, index) in data.options.supportedAllTypes"
                :key="index"
                @change="supportedTypeChange(item)"
              >
                <el-checkbox :label="item"> </el-checkbox>
              </span>
            </el-checkbox-group>
          </el-row>
        </el-form-item>
      </template>
      <template v-if="data.type == 'fileUpload'">
        <el-form-item label="最大上传数">
          <el-input
            class="custom_input"
            type="number"
            v-model.number="data.options.length"
          ></el-input>
        </el-form-item>
        <el-form-item label="支持的类型" label-width="100px">
          <el-row :span="30">
            <el-checkbox-group v-model="data.options.supportedTypes">
              <span
                v-for="(item, index) in data.options.supportedAllTypes"
                :key="index"
                @change="supportedTypeChange(item)"
              >
                <el-checkbox :label="item"> </el-checkbox>
              </span>
            </el-checkbox-group>
          </el-row>

          <!--          <el-checkbox-group v-model="curUpLoadAcceptList">-->
          <!--            <el-checkbox v-for="mpb in curUpLoadAcceptList"  :key="mpb.id" :label="mpb.id" @change="checkinlist">{{mpb.name}}</el-checkbox>-->

          <!--          </el-checkbox-group>-->
        </el-form-item>

        <!--        <el-form-item label="使用七牛上传">-->
        <!--          <el-switch v-model="data.options.isQiniu"></el-switch>-->
        <!--        </el-form-item>-->
        <template v-if="data.options.isQiniu">
          <el-form-item label="Domain" :required="true">
            <el-input v-model="data.options.domain"></el-input>
          </el-form-item>
          <el-form-item label="获取七牛Token方法" :required="true">
            <el-input v-model="data.options.tokenFunc"></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="上传地址" :required="true">
            <el-input
              class="custom_input"
              v-model="data.options.action"
            ></el-input>
          </el-form-item>
        </template>
      </template>

      <template v-if="data.type == 'imgupload'">
        <el-form-item label="最大上传数">
          <el-input
            class="custom_input"
            type="number"
            v-model.number="data.options.length"
          ></el-input>
        </el-form-item>
        <template>
          <el-form-item label="上传地址" :required="true">
            <el-input
              class="custom_input"
              v-model="data.options.action"
            ></el-input>
          </el-form-item>
        </template>
      </template>

      <template v-if="data.type == 'blank'">
        <el-form-item label="绑定数据类型">
          <el-select v-model="data.options.defaultType">
            <el-option value="String" label="字符"></el-option>
            <el-option value="Object" label="对象"></el-option>
            <el-option value="Array" label="数组"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template v-if="data.type == 'vue2Editor'">
        <el-form-item label="上传地址" :required="true">
          <el-input
            class="custom_input"
            v-model="data.options.action"
          ></el-input>
        </el-form-item>
      </template>
      <template v-if="data.type == 'grid' || data.type == 'subTable'">
        <!--                <el-form-item label="子表名称">-->
        <!--                    <el-input type="text" v-model.number="data.options.subTableName"></el-input>-->
        <!--                </el-form-item>-->
        <el-form-item label="栅格间隔">
          <el-input
            class="custom_input"
            type="number"
            v-model.number="data.options.gutter"
          ></el-input>
        </el-form-item>
        栅格配置
        <draggable
          tag="ul"
          :list="data.columns"
          v-bind="{
            group: { name: 'options' },
            ghostClass: 'ghost',
            handle: '.drag-item'
          }"
          handle=".drag-item"
        >
          <li
            v-for="(item, index) in data.columns"
            :key="index"
            style="margin-left: 80px"
          >
            <i
              class="drag-item"
              style="font-size: 16px;margin: 0 5px;cursor: move;"
              ><i class="iconfont icon-icon_bars"></i
            ></i>
            <el-input
              placeholder="栅格值"
              size="mini"
              style="width: 90px;"
              type="number"
              v-model.number="item.span"
            ></el-input>

            <el-button
              @click="handleOptionsRemove(index)"
              circle
              plain
              type="danger"
              size="mini"
              icon="el-icon-minus"
              style="padding: 4px;margin-left: 5px;"
            ></el-button>
          </li>
        </draggable>
        <div style="margin-left: 22px;">
          <el-button type="text" @click="handleAddColumn">添加列</el-button>
        </div>
      </template>

      <el-form-item
        label="自定义Class"
        v-if="Object.keys(data.options).includes('customClass')"
      >
        <el-input
          class="custom_input"
          v-model="data.options.customClass"
          clearable
        ></el-input>
      </el-form-item>

      <template v-if="data.type == 'h4'">
        <el-form-item label="文本">
          <el-input
            class="custom_input"
            type="textarea"
            v-model="data.options.defaultValue"
          ></el-input>
        </el-form-item>
      </template>
      <template v-if="data.type == 'p'">
        <el-form-item label="文本">
          <el-input
            class="custom_input"
            type="textarea"
            v-model="data.options.defaultValue"
          ></el-input>
        </el-form-item>
      </template>
      <template v-if="data.type == 'small'">
        <el-form-item label="文本">
          <el-input
            class="custom_input"
            type="textarea"
            v-model="data.options.defaultValue"
          ></el-input>
        </el-form-item>
      </template>
      <template v-if="data.type == 'mark'">
        <el-form-item label="文本">
          <el-input
            class="custom_input"
            type="textarea"
            v-model="data.options.defaultValue"
          ></el-input>
        </el-form-item>
      </template>
      <template
        v-if="
          data.type == 'del' ||
            data.type == 'u' ||
            data.type == 'em' ||
            data.type == 'strong'
        "
      >
        <el-form-item label="文本">
          <el-input
            class="custom_input"
            type="textarea"
            v-model="data.options.defaultValue"
          ></el-input>
        </el-form-item>
      </template>

      <template v-if="data.type != 'grid' && data.type != 'subTable'">
        <!--                <el-form-item label="数据绑定Key">-->
        <!--                    <el-input v-model="data.model"></el-input>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="操作属性"-->
        <!--                              v-if="data.type!='processInfo' && data.type!='radio' && data.type!='checkbox' && data.type!='iframe' && data.type!='divider' && data.type!='text' && data.type!='dialog'&& data.type!='userDialog'  ">-->
        <!--                    <el-checkbox v-model="data.options.readonly"-->
        <!--                                 v-if="Object.keys(data.options).indexOf('readonly')>=0">完全只读-->
        <!--                    </el-checkbox>-->
        <!--                    <el-checkbox v-model="data.options.disabled"-->
        <!--                                 v-if="Object.keys(data.options).indexOf('disabled')>=0">禁用-->
        <!--                    </el-checkbox>-->
        <!--                    <el-checkbox v-model="data.options.showPassword"-->
        <!--                                 v-if="Object.keys(data.options).indexOf('showPassword')>=0">是否密码框-->
        <!--                    </el-checkbox>-->
        <!--                    <el-checkbox v-model="data.options.editable"-->
        <!--                                 v-if="Object.keys(data.options).indexOf('editable')>=0">文本框可输入-->
        <!--                    </el-checkbox>-->
        <!--                    <el-checkbox v-model="data.options.clearable"-->
        <!--                                 v-if="Object.keys(data.options).indexOf('clearable')>=0">显示清除按钮-->
        <!--                    </el-checkbox>-->
        <!--                    <el-checkbox v-model="data.options.arrowControl"-->
        <!--                                 v-if="Object.keys(data.options).indexOf('arrowControl')>=0">使用箭头进行时间选择-->
        <!--                    </el-checkbox>-->
        <!--                    <el-checkbox v-model="data.options.isDelete"-->
        <!--                                 v-if="Object.keys(data.options).indexOf('isDelete')>=0">删除-->
        <!--                    </el-checkbox>-->
        <!--                    <el-checkbox v-model="data.options.editable"-->
        <!--                                 v-if="Object.keys(data.options).indexOf('editable')>=0">编辑-->
        <!--                    </el-checkbox>-->

        <!--                </el-form-item>-->
        <!--                <el-form-item label="校验"-->
        <!--                              v-if="data.type!='processInfo' && data.type!='dateCalendar' && data.type!='tag' && data.type!='progress' && data.type!='link'  && data.type!='tabs' && data.type!='date' && data.type!='block' && data.type!='table'  && data.type!='iframe' && data.type!='divider' && data.type!='text' && data.type!='dialog'&& data.type!='userDialog' && data.type!='fileUpload' ">-->
        <!--                    <div v-if="Object.keys(data.options).indexOf('required')>=0">-->
        <!--                        <el-checkbox v-model="data.options.required">必填</el-checkbox>-->
        <!--                    </div>-->

        <!--                </el-form-item>-->

        <el-form-item
          label="校验方式"
          v-if="Object.keys(data.options).indexOf('dataType') >= 0"
        >
          <el-select
            @change="onSelectedDataType($event)"
            v-model="data.options.dataType"
            size="mini"
          >
            <el-option
              v-for="item in rulesList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-table
            v-if="Object.keys(data.options).indexOf('dataType') >= 0"
            :data="data.rules"
            style="width: 100%"
          >
            <el-table-column label="提示" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.msg" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-form-item>
                  <div v-if="scope.row.val != undefined">
                    <div v-if="scope.row.customerType == 'regular'">
                      <el-input v-model="scope.row.val" />
                    </div>

                    <div v-else>
                      <el-input v-model.number="scope.row.val" type="number" />
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="scope.row.customerType == 'connector'">
                      <el-input v-model="scope.row.connector" />
                    </div>
                  </div>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </template>
    </el-form>
  </div>

  <!--    <ChildComponent ref="child"></ChildComponent>-->
</template>

<script>
import Draggable from "vuedraggable";

import widgetForm from "./WidgetForm";
import widgetFormItem from "./WidgetFormItem";
import { verification } from "./router/verification.js";

import {
  advanceComponents,
  basicComponents,
  layoutComponents,
  navigationComponents,
  uncommonlyUsedComponents,
  customComponents,
} from "./componentsConfig.js";
import request from "../util/request.js";
import API from "./router/api.js";
import { getDateControls } from "./router/utils";
import MakingForm from "./Container.vue";

function checkIsNullOrEmpty(value) {
  var reg = /^\s*$/;
  return value != null && value != undefined && !reg.test(value);
}

export default {
  components: {
    Draggable,
    widgetForm,
    basicComponents,
    MakingForm,
    widgetFormItem
  },
  // 父组件传递的data
  props: ["data", "structData"],
  mounted() {},
  data() {
    return {
      hiddenTableHeader: false,

      setCustDialogResFormVisible: false,
      dateValue: [],
      customDialogDataValue: [],
      resultFieldArray: [],
      num: 2,
      formProperties: [],
      controlsItem: [],
      dialogFormVisible: false,
      remoteFuncs: [],
      remoteFuncsFields: [],
      userDialogSelectorList: [
        { label: "用户选择器", value: "user-selector" },
        { label: "角色选择器", value: "role-selector" }
      ],
      finishStatus: [
        {
          value: "wait",
          label: "等待"
        },
        {
          value: "process",
          label: "处理中"
        },
        {
          value: "finish",
          label: "结束"
        },
        {
          value: "error",
          label: "错误"
        },
        {
          value: "success",
          label: "成功"
        }
      ],

      unitOptions: [
        {
          label: "长度",
          options: [
            {
              value: "微米",
              label: "微米"
            },
            {
              value: "毫米",
              label: "毫米"
            },
            {
              value: "厘米",
              label: "厘米"
            },
            {
              value: "分米",
              label: "分米"
            },
            {
              value: "米",
              label: "米"
            },
            {
              value: "十米",
              label: "十米"
            },
            {
              value: "百米",
              label: "百米"
            },
            {
              value: "千米",
              label: "千米"
            }
          ]
        },
        {
          label: "面积",
          options: [
            {
              value: "平方厘米",
              label: "平方厘米"
            },
            {
              value: "平方分米",
              label: "平方分米"
            },
            {
              value: "平方米",
              label: "平方米"
            },
            {
              value: "公顷",
              label: "公顷"
            },
            {
              value: "平方千米",
              label: "平方千米"
            }
          ]
        },
        {
          label: "体积",
          options: [
            {
              value: "立方厘米",
              label: "立方厘米"
            },
            {
              value: "立方分米",
              label: "立方分米"
            },
            {
              value: "平方米",
              label: "平方米"
            }
          ]
        },

        {
          label: "容量",
          options: [
            {
              value: "厘升",
              label: "厘升"
            },
            {
              value: "分升",
              label: "分升"
            },
            {
              value: "升",
              label: "升"
            },
            {
              value: "十升",
              label: "十升"
            },
            {
              value: "百升",
              label: "百升"
            },
            {
              value: "千升",
              label: "千升"
            }
          ]
        },
        {
          label: "质量",
          options: [
            {
              value: "厘克",
              label: "厘克"
            },
            {
              value: "分克",
              label: "分克"
            },
            {
              value: "克",
              label: "克"
            },
            {
              value: "十克",
              label: "十克"
            },
            {
              value: "百克",
              label: "百克"
            },
            {
              value: "千克",
              label: "千克"
            },
            {
              value: "吨",
              label: "吨"
            }
          ]
        }
      ],
      rulesList: [
        { id: "nonull", name: "必填", prompt: "" },
        { id: "isnum", name: "数字", prompt: "" },
        { id: "min", name: "最小字符长度", prompt: "" },
        { id: "max", name: "最大字符长度", prompt: "" },
        { id: "phone", name: "手机号码", prompt: "" },
        { id: "url", name: "URL地址", prompt: "" },
        { id: "email", name: "邮箱地址", prompt: "" },
        { id: "pwd", name: "密码校验", prompt: "" },
        { id: "idNumber", name: "身份证", prompt: "" },
        { id: "regular", name: "正则表达式", prompt: "" },
        { id: "string", name: "字符串", prompt: "" },
        { id: "connector", name: "接口", prompt: "" }
      ],
      blockLayout: 12,
      cityOptions: [
        {
          value: "provinceAndCityData",
          label: "省市二级联动（不带“全部”选项)"
        },
        {
          value: "provinceAndCityDataPlus",
          label: "省市二级联动（带“全部”选项)"
        },
        {
          value: "regionData",
          label: "省市区三级联动（不带“全部”选项)"
        },
        {
          value: "selectedOptions",
          label: "省市区三级联动（带“全部”选项）"
        }
      ],
      tabPosition: [
        {
          value: "top",
          label: "上"
        },
        {
          value: "right",
          label: "右"
        },
        {
          value: "bottom",
          label: "下"
        },
        {
          value: "left",
          label: "左"
        }
      ],
      tabsType: [
        {
          value: "",
          label: "请选择"
        },
        {
          value: "card",
          label: "卡片"
        },
        {
          value: "border-card",
          label: "盒装"
        }
      ],
      alertType: [
        {
          value: "",
          label: "请选择"
        },
        {
          value: "success",
          label: "成功"
        },
        {
          value: "warning",
          label: "警告"
        },
        {
          value: "info",
          label: "默认"
        },
        {
          value: "error",
          label: "错误"
        }
      ],
      btnOptionsType: [
        {
          value: "primary",
          label: "主要"
        },
        {
          value: "success",
          label: "成功"
        },
        {
          value: "warning",
          label: "警告"
        },
        {
          value: "info",
          label: "信息"
        },
        {
          value: "error",
          label: "错误"
        },
        {
          value: "danger",
          label: "危险"
        },
        {
          value: "text",
          label: "文本"
        }
      ],
      effectType: [
        {
          value: "",
          label: "请选择"
        },
        {
          value: "light",
          label: "光亮"
        },
        {
          value: "dark",
          label: "黑暗"
        }
      ],
      options: [
        {
          label: "文本标签",
          options: [
            {
              value: "input",
              label: "单行"
            },
            {
              value: "textarea",
              label: "多行"
            },
            {
              value: "text",
              label: "文本"
            }
          ]
        },
        {
          label: "对话框",
          options: [
            {
              value: "dialog",
              label: "对话框"
            },
            {
              value: "date",
              label: "日期选择器"
            }
          ]
        },
        {
          label: "人员选择器",
          options: [
            {
              value: "userDialog",
              label: "人员选择器"
            }
            // , {
            //     value: 'time',
            //     label: '时间选择器'
            // }
          ]
        },
        {
          label: "组标签",
          options: [
            {
              value: "checkbox",
              label: "多选框组"
            },
            {
              value: "radio",
              label: "单选框组"
            },
            {
              value: "select",
              label: "下拉选择框"
            }
          ]
        },
        {
          lable: "人员选择",
          options: [
            {
              value: "persionSelect",
              label: "人员选择框"
            }
          ]
        },
        {
          label: "流程标签",
          options: [
            {
              value: "processInfo",
              label: "审批记录"
            }
          ]
        },
        //   , {
        //     label: '上传组件',
        //     options: [
        //       {
        //         value: 'fileUpload',
        //         label: '文件上传'
        //       }
        //     ]
        //
        //   }
        {
          label: "富文本",
          options: [
            {
              value: "editor",
              label: "富文本"
            }
          ]
        },
        {
          label: "其他",
          options: [
            {
              value: "rate",
              label: "评分"
            },
            {
              value: "color",
              label: "颜色选择器"
            },
            {
              value: "switch",
              label: "开关"
            },
            {
              value: "slider",
              label: "滑块"
            }
          ]
        }
      ],
      res: [], // 字段修改的配置
      radio1: 12,
      color: "rgba(255, 69, 0, 0.68)",
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ],
      curUpLoadAcceptList: [
        {
          value: "jpg",
          label: "jpg"
        },
        {
          value: "jpeg",
          label: "jpeg"
        },
        {
          value: "png",
          label: "png"
        },
        {
          value: "bmp",
          label: "bmp"
        },
        {
          value: "pdf",
          label: "pdf"
        },
        {
          value: "JPG",
          label: "JPG"
        }
      ],

      formatOptions: [
        {
          value: "yyyy-MM-dd",
          label: "年-月-天"
        },
        {
          value: "yyyy-MM-dd HH:mm:ss",
          label: "年-月-天 时:分:秒"
        },
        {
          value: "yyyy-MM",
          label: "年-月"
        },
        {
          value: "HH:mm:ss",
          label: "时:分:秒"
        }
      ],

      formatDateOptions: [
        {
          value: "year",
          label: "年"
        },
        {
          value: "month",
          label: "月"
        },
        {
          value: "date",
          label: "日期"
        },
        {
          value: "dates",
          label: "指定日期"
        },
        {
          value: "datetime",
          label: "标准日期"
        },
        {
          value: "datetimerange",
          label: "标准日期范围"
        },
        {
          value: "daterange",
          label: "日期范围"
        }
      ],
      value: "",
      formatValue: "",
      basicComponents: basicComponents,
      advanceComponents: advanceComponents,
      layoutComponents: layoutComponents,
      navigationComponents: navigationComponents,
      uncommonlyUsedComponents: uncommonlyUsedComponents,
      customComponents: customComponents,

      validator: {
        // 拖拽表单时,需要验证的字段
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      }
    };
    // validator
    const validateNameInput = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("此项必填！"));
      } else {
        callback();
      }
    };

    return {
      rules: {
        login: [{ validator: validateNameInput, trigger: "blur" }]
      }
    };
  },
  computed: {
    show() {
      if (this.data && Object.keys(this.data).length > 0) {
        return true;
      }
      return false;
    }
  },
  created() {
    var _self = this;
    _self.getDataType();

    _self.initControlsItem();
    _self.initSelectDict();
  },

  methods: {
    spanChange(val) {
      this.data.options.span = val;
    },
    changeCheckbox: function(data) {},
    changeFormProperties: function(params) {
      let obj = {};
      obj = this.formProperties.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.value === params; //筛选出匹配数据
      });
      this.data.name = obj.label;
    },
    unBindTarget: function(index) {
      this.data.options.chooseFiledList[index].target = "";
    },

    setCustDialogRes: function() {
      this.$nextTick(() => {
        var customDialogAlias = this.data.options.customDialogAlias;
        if (this.data.options.chooseFiledList) {
          if (this.data.options.chooseFiledList.length > 0) {
            this.setCustDialogResFormVisible = true;
          } else {
            if (customDialogAlias && customDialogAlias.length > 0) {
              request
                .get(
                  API.prefix +
                    "/form/customDialog/get/code/" +
                    customDialogAlias
                )
                .then(res => {
                  var options = res.data;
                  try {
                    var resultFieldArray = JSON.parse(options.resultFieldStr);
                    var existArray = [];
                    for (var i = 0; i < resultFieldArray.length; i++) {
                      var resultFieldArrayObj = resultFieldArray[i];
                      var obj = {};
                      obj["model"] = resultFieldArrayObj.model;
                      obj["columnKey"] = resultFieldArrayObj.columnKey;
                      obj["target"] = "";
                      existArray.push(obj);
                    }

                    this.data.options.chooseFiledList = existArray;
                    this.setCustDialogResFormVisible = true;
                  } catch (e) {}
                });
            } else {
              this.$message.error("请选择对话框");
            }
          }
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return {
          rowspan: 1,
          colspan: 2
        };
      }
    },
    addInnerRow: function(index) {
      var innerObj = { target: "", type: "" };
      this.data.options.effect[index].effects.push(innerObj);
    },
    delInnerRow: function(row, index) {
      this.data.options.effect[row].effects.splice(index, 1);
    },
    getDialogFormData: function(element) {
      if (element) {
        if (element.options.effect) {
          if (element.options.effect.length > 0) {
            return element.options.effect;
          } else {
            return [];
          }
        } else {
          return [];
        }
      } else {
        return [];
      }
    },
    dialogFormVisibleClose: function(element) {
      this.dialogFormVisible = false;
    },

    handleDeleteEffect: function(row, index) {
      this.data.options.effect.splice(index, 1);
    },
    initRemoteFuncs: function() {
      request.get(API.prefix + "/form/customQuery/listJson").then(res => {
        var options = res.data;
        this.remoteFuncs = options;
      });
    },
    initControlsItem: function() {
      if (this.structData) {
        var list = this.structData.list.filter(item => {
          return item.model != this.data.model;
        });

        this.controlsItem = list;
      }
    },
    initSelectDict: function() {
      try {
        request.get(API.prefix + "/form/sys/test3").then(res => {
          var options = res.data;
          this.remoteFuncs = options;
        });
      } catch (e) {}
    },
    triggerData: function() {},

    changeDateRule: function($event, item) {
      this.data.rules = [];
      var data = {};
      data["validator"] = this.validatePass;
      data["trigger"] = "blur";
      data["msg"] = "日期校验不通过";
      data["customerType"] = "dateRule";
      this.data.rules.push(data);
    },
    getAllDate: function() {
      this.$nextTick(() => {
        var notTims = [];

        if (this.structData) {
          var struts = this.structData.list;
          var notTims = getDateControls(struts, this.data.model);
          this.dateValue = notTims;
        }
      });
    },
    getAllDialogDate: function() {
      this.$nextTick(() => {
        request
          .get(API.prefix + "/form/customDialog/listJson?system=0")
          .then(res => {
            var options = res.data;
            if (res.code == 0) {
              this.customDialogDataValue = options;
            }
          });
      });
    },
    getAllUserDialogData: function() {},
    getAllUserDialogSelectorList: function() {
      this.$nextTick(() => {
        request
          .get(API.prefix + "/form/customDialog/listJson?system=1")
          .then(res => {
            var options = res.data;
            if (res.code == 0) {
              this.userDialogSelectorList = options;
            }
          });
      });
    },
    initDialogFieldData: function() {},
    confirmFormCustomDialog: function() {
      this.setCustDialogResFormVisible = false;
    },
    getRemoteDict: function() {
      this.$nextTick(() => {
        if (this.data) {
          if (this.data.options.remoteUrlKey) {
            var remoteUrlKey = this.data.options.remoteUrlKey;
            var notTims = [];
            if (remoteUrlKey && remoteUrlKey.length > 0) {
              request.get(API.prefix + remoteUrlKey).then(res => {
                var options = res.data;
                if (res.code == 0) {
                }
              });
            }
          }
        }
      });
    },
    getRemoteField: function() {
      this.$nextTick(() => {
        if (this.data.options) {
          if (this.data.options.remoteUrlKey) {
            var remoteUrlKey = this.data.options.remoteUrlKey;
            var notTims = [];
            ///form/customQuery/get/key/
            if (remoteUrlKey && remoteUrlKey.length > 0) {
              request
                .get(API.prefix + "/form/customQuery/get/key/" + remoteUrlKey)
                .then(res => {
                  var options = res.data;
                  if (res.code == 0) {
                    var resultFieldStr = res.data.resultFieldStr;
                    const obj = JSON.parse(resultFieldStr);
                    this.remoteFuncsFields = obj;
                  }
                });
            }
          }
        }
      });
    },

    getAllDateNotSelf: function() {
      this.$nextTick(() => {
        var notTims = [];
        var struts = this.structData.list;
        var notTims = getDateControls(struts, this.data.model);
        var notMe = notTims.filter(item => item.model != this.data.model);
        this.dateValue = notMe;
      });
    },
    onSelectedDataType: function(vId) {
      if (this.data.rules == null) {
        this.data.rules = [];
      }
      let obj = {};
      obj = this.rulesList.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.id === vId; //筛选出匹配数据
      });
      //获取table数据
      var data = {};
      data["validator"] = this.validatePass;
      data["trigger"] = "blur";
      data["msg"] = obj.name;
      data["customerType"] = obj.id;
      if (obj.id == "min" || obj.id == "max" || "regular" == obj.id) {
        data["val"] = 0;
      }
      if ("connector" == obj.id) {
        data["connector"] = "";
      }

      var existRuleObj = this.data.rules.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.type === vId; //筛选出匹配数据
      });
      if (!existRuleObj) {
        this.data.rules.push(data);
      }
      if ("nonull" == vId) {
        this.data.options.required = true;
      }
    },
    validatePass(rule, info, callback) {
      var type = rule.customerType;
      var length = rule.val;
      verification(rule, info, callback, null);
    },
    layOutableColumnsChange: function(val, key) {
      this.data.options.span = Number(val);
    },
    directionChange: function(val, key) {
      this.data.options.direction = val;
    },

    // 栅格监听函数
    handleClick() {
      this.data.options.span = 6;
    },
    getDataType() {
      var _self = this;
      if (this.$route) {
        let params = this.$route.query;
        if (params) {
          var id = params.id;
          var messageId = params.messageId;
          if (messageId) {
            localStorage.setItem("messageId", messageId);
          }
          if (id) {
            request
              .get(API.prefix + "/form/bus/render/getStruct/" + id)
              .then(res => {
                var options = res.data;
                this.formProperties = options;
              });
          }
        }
      }
    },
    supportedTypeChange: function(item) {
      var supportedTypes = this.data.options.supportedTypes;
      var tmp = [];
      supportedTypes.forEach(function(item) {
        tmp.push("." + item);
      });
      var supportedTypesStr = tmp.join(",");
      this.data.options.supportedTypeStr = supportedTypesStr;
    },
    onEnterSearch: function(val, type) {
      var rules = this.data.rules;
      let item = rules.find(obj => obj.originateType === type);
      if (type == "min") {
        item.message = "最小字符长度为" + val;
      } else if (type == "max") {
        item.message = "最大字符长度为" + val;
      }
    },
    handleDelete(index, row) {
      var vm = this;
      if (this.data.rules[index].customerType == "nonull") {
        this.data.options.required = false;
      }

      this.data.rules.splice(index, 1);
      vm.$forceUpdate();
    },
    handleOptionsRemove(index) {
      if (this.data.type === "grid" || this.data.type == "subTable") {
        this.data.columns.splice(index, 1);
      } else if (this.data.type === "tabs") {
        this.data.tabColumns.splice(index, 1);
        this.data.options.options.splice(index, 1);
      } else if (this.data.type === "breadcrumb") {
        this.data.options.breadcrumbItemOptions.splice(index, 1);
      } else if (this.data.type === "steps") {
        this.data.options.stepItemOptions.splice(index, 1);
      } else if (this.data.type === "collapse") {
        this.data.options.options.splice(index, 1);
      } else {
        this.data.options.options.splice(index, 1);
      }
    },
    handleAddOption() {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: "新选项",
          label: "新选项"
        });
      } else {
        this.data.options.options.push({
          value: "新选项"
        });
      }
    },
    handleAddEffects: function() {
      var remote = this.data.options.remote;
      if (remote) {
        var remoteUrlKey = this.data.options.remoteUrlKey;
        if (remoteUrlKey && remoteUrlKey.length > 0) {
          request.get(API.prefix + remoteUrlKey).then(res => {
            var options = res.data;
            var datas = [];
            if (res.code == 0) {
              for (var i = 0; i < options.length; i++) {
                var obj = {};
                obj["label"] = options[i]["label"];
                obj["value"] = options[i]["value"];
                datas.push(obj);
              }
              this.remoteFuncsFields = datas;
            }
          });
        }
      } else {
        this.remoteFuncsFields = this.data.options.options;
      }

      this.dialogFormVisible = true;
    },
    addListRow: function() {
      var innerObj = { target: "", type: "" };
      var innerArray = [];
      innerArray.push(innerObj);
      var obj = {
        value: "",
        type: "",
        commonRule: "",
        effects: innerArray
      };
      this.data.options.effect = this.data.options.effect.concat(obj);
    },

    handleAddItemOptions() {
      this.data.options.breadcrumbItemOptions.push({
        value: "活动页" + (this.data.options.breadcrumbItemOptions.length + 1),
        replace: false
      });
    },
    handleAddStepItemOptions() {
      this.data.options.stepItemOptions.push({
        value: "步骤" + (this.data.options.stepItemOptions.length + 1),
        description: ""
      });
    },
    handleResetOptions() {
      this.data.options.defaultValue = 0;
      this.data.options.nextStep = false;
    },
    handleAddTabsOption() {
      var size = this.data.options.options.length;
      this.data.options.options.push({
        value: "新选项" + (parseInt(size) + 1),
        label: "新选项" + (parseInt(size) + 1)
      });
      this.data.tabColumns.push([]);
    },
    handleAddCollapseOption() {
      var size = this.data.options.options.length;
      this.data.options.options.push({
        value: "面板" + (parseInt(size) + 1),
        label: "面板" + (parseInt(size) + 1)
      });
      this.data.tabColumns.push([]);
    },
    handleAddascade() {
      alert(1);
    },
    handleAddColumn() {
      this.data.columns.push({
        span: "",
        list: []
      });
    },
    handleSelectMuliple(value) {
      if (value) {
        if (this.data.options.defaultValue) {
          this.data.options.defaultValue = [this.data.options.defaultValue];
        } else {
          this.data.options.defaultValue = [];
        }
      } else {
        if (this.data.options.defaultValue.length > 0) {
          this.data.options.defaultValue = this.data.options.defaultValue[0];
        } else {
          this.data.options.defaultValue = "";
        }
      }
    },
    onSelectedControlType(value, index) {
      var data = this.data;
      var allComponents = this.basicComponents
        .concat(this.advanceComponents)
        .concat(this.advanceComponents)
        .concat(this.layoutComponents)
        .concat(this.navigationComponents)
        .concat(this.uncommonlyUsedComponents)
        .concat(this.customComponents);
      allComponents.forEach(function(value1, i) {
        if (value1.type == value.trim()) {
          data.type = value1.type;
          data.name = value1.name;
          data.icon = value1.icon;
          data.rules = [];
          data.options = value1.options;
        }
      });
    },
    onSelectedDateType(value, index) {
      this.data.options.format = value;
    },
    changeCity(value) {
      this.$forceUpdate();
    },
    validateRequired(val) {
      if (val) {
        //console.log(1111)
        this.validator.required = {
          required: true,
          message: `${this.data.name}必须填写`
        };
        // this.generateRule("string")
      } else {
        this.validator.required = null;
      }

      // this.$nextTick(() => {
      //   this.generateRule()
      // })
    },

    validateDataType(val) {},
    checkIsNullOrEmpty(value) {
      var reg = /^\s*$/;
      return value != null && value != undefined && !reg.test(value);
    }
  },

  watch: {
    selectWidget: {
      handler(val) {
        //第一次拖拽表单时触发
        this.$emit("update:select", val);
      },
      deep: true
    },
    //监听输入的span值
    "data.options.span": function(val) {
      //console.log(val);
      if (val >= 24) {
        this.data.options.span = 24;
      }
    },

    "data.options.rangeAble": function(val) {
      if (typeof val !== "undefined") {
        if (val) {
          this.data.options.defaultValue = null;
        } else {
          if (Object.keys(this.data.options).indexOf("defaultValue") >= 0)
            this.data.options.defaultValue = "";
        }
      }
    },
    "data.name": function(val) {
      this.getAllDate();

      this.initControlsItem();
      if (this.data.type == "dialog" || this.data.type == "userDialog") {
        this.getRemoteField();
        this.getAllUserDialogSelectorList();
      }

      if (this.data.options) {
        //  this.validateRequired(this.data.options.required)
        //  this.validateDataType(this.data.options.dataType)
        // this.valiatePattern(this.data.options.pattern)
      }
    }
  }
};
</script>
<style type="text/css">
.input-group {
  margin-top: 5px;
}

.custom_input {
  width: auto !important;
}
</style>
